<!-- 新增/编辑计量单位弹出框 -->
<template>
  <div class="client-contact">
    <a-space>
      <a-input-search
        search-button
        v-model="NameSearch"
        :style="{ width: '220px' }"
        placeholder="请输入库位名称"
        @search="Search"
      />

      <a-button type="outline" @click="resetting">
        <template #icon> <icon-refresh /> </template>重置</a-button
      >
    </a-space>
    <tableTurn style="margin-top: 10px" :tableData="getData" ref="tableRef">
      <a-table-column :width="70" align="center">
        <template #title> 序号 </template>
        <template #cell="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
      </a-table-column>
      <a-table-column
        align="center"
        :width="200"
        title="库位编码"
        data-index="number"
      >
      </a-table-column>
      <a-table-column
        align="center"
        :width="150"
        title="库位名称"
        data-index="name"
      >
      </a-table-column>

      <a-table-column
        align="location"
        :width="150"
        title="所在位置"
        data-index="location"
      >
      </a-table-column>
      <a-table-column
        align="center"
        data-index="amount"
        :width="100"
        title="储存数量"
      >
      </a-table-column>
    </tableTurn>
  </div>
</template>

<script lang="ts" setup>
  import { computed, ref, reactive, watch } from 'vue';
  import { useRoute } from 'vue-router';
  import { GetLocationData } from '@/api/inventory-management/warehouse-management/location-list/index';

  const route = useRoute();
  const NameSearch = ref();
  const form = ref(JSON.parse(route.query.res as any));
  const tableRef = ref();

  const getData = async (page: any) => {
    try {
      const data = {};
      if (NameSearch.value) data.locationName = NameSearch.value;
      const res = await GetLocationData({
        ...page,
        managementId: form.value.id,
        ...data,
      });
      return Promise.resolve(res);
    } catch (err: unknown) {
      console.log(err);
    }
  };

  const Search = () => {
    tableRef.value.refreshPaging();
    tableRef.value.loadData();
  };
  const resetting = () => {
    NameSearch.value = '';
    tableRef.value.refreshPaging();
    tableRef.value.loadData();
  };
</script>

<style scoped lang="less">
  .unchecked-radio {
    background-color: #fff;
    color: #dcdfe6;
    border: 1px solid #dcdfe6;
    font-weight: 700;
    font-size: 16px;
    position: relative;
    top: -10px;
  }
  .checked-radio {
    background-color: #3491fa;
    color: #fff;
    border: 1px solid #3491fa;
    font-weight: 700;
    font-size: 16px;
    position: relative;
    top: -10px;
  }
  .radio-icon-box-checked {
    border: 1px solid #3491fa;
    background-color: #fff;
  }
  .radio-icon-box-unchecked {
    border: 1px solid rgba(220, 223, 230, 1);
  }
  .radio-icon-checked {
    color: #3491fa;
  }

  .radio-icon-unchecked {
  }
  .radio-icon {
    position: relative;
    top: 3px;
  }

  .client-contact {
    padding: 0px 20px;
  }

  .search-box {
    display: flex;
    padding: 10px;
    margin-top: -7px;
  }
</style>
